<!--
 * @Author: fleeting-ln 3518413017@qq.com
 * @Date: 2023-11-11 15:16:58
 * @LastEditors: fleeting-ln 3518413017@qq.com
 * @LastEditTime: 2023-11-25 21:03:57
 * @FilePath: \see_you\src\components\profilePictureUpload.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="page-class" id="page-class" :style="{height:innerHeight+'px'}">
        <div class="img-class">
            <cropper-image :Name="cropperName" @uploadImgSuccess="uploadImgSuccess"  :file="file" ref="child">
            </cropper-image>
        </div>
        <div class="operate-class">
            <van-uploader :before-read="beforeReadx">
                <van-button color="#767676" plain>重选</van-button>
            </van-uploader>
            <van-button color="#767676" plain @click="onclose">关闭</van-button>
            <van-button color="#767676" plain @click="handleUploadSuccess">上传</van-button>
        </div>
    </div>
</template>

<script>
import CropperImage from '@/components/CropperImage.vue'
export default {
    components: {
        CropperImage
    },
    name: 'profilePictureUpload',
    props: ['file'],
    // inject: ["beforeReadMethod"],
    data() {
        return {
            cropperName: 'cxk',
            innerHeight:0
        }
    },
    mounted(){
        // let element = document.getElementById('page-class');
        // element.scrollTop = element.scrollHeight;
        this.innerHeight = window.innerHeight;
    },
    methods: {
        handleUploadSuccess() {
            this.$refs.child.uploadImg('blob');
        },
        // 上传头像
        beforeReadx(file) {
        console.log(file);
            this.$emit("beforeReadx",file)
        },
        onclose(){
            this.$emit('onclose')
        },
        //获取请求成功的头像链接
        uploadImgSuccess(value){
            this.$emit('uploadImgSuccess',value)
        }
    }
}
</script>

<style lang="scss" scoped>
.page-class {
    width: 100%;
    // height: 100vh;
    background-color: rgba(0, 0, 0, 1);
    position: relative;
    // overflow-y: auto;
}

.operate-class {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: white;
    padding: 6px 16px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;

    ::v-deep .van-button {
        width: 100px;
        height: 40px;
        border-radius: 8px !important;
    }

    ::v-deep .van-button--normal {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: RGBA(26, 26, 26, 1);
    }

}

.img-class {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.box {
    width: 200px;
    height: 200px;

    &>img {
        width: 100%;
        height: 100%;
    }
}
</style>